<template>
    <div class="searchlist">
        <ul class="thum-style clearfix">
                <li v-for="(item, index) in listshopdata" class="m-cont list-datail clearfix" data-code="item.cmmdtyCode" :class="(item.className1?item.className1+' ' : '') + item.className" :key="item.id"> <!-- {'item-noinv': (item.availableQty == 0 || item.price <= 0)} -->
                    <div class="o-index-pro-pic">
                        <a :href="'#/detail/'+item.cmmdtyCode+'/'+item.supplierCode">
                            <img  alt="" :src="item.src1">
                        </a>
                    </div>
                    <h4 class="o-pro-info">
                        <a :href="'#/detail/'+item.cmmdtyCode+'/'+item.supplierCode">{{item.cmmdtyName}}</a>
                    </h4>
                    <div class="qa-price clearfix" >
                        <i v-if=" item.price > 0"><i class="yen">&yen;</i> {{item.price}}</i><span class="no-line" v-if="item.price > 0 && item.cmmdtyUnit">/{{item.cmmdtyUnit}}</span>
                        <span class="no-line sendFlagStr" v-if="item.sendFlagStr">{{item.sendFlagStr}}</span>
                        <!-- <span v-if="item.basePrice">&yen;{{item.basePrice}}</span> -->
                    </div>

                    <img :src="item.labelPath" alt="" :class="item.paccClass">
                </li>
          </ul>
    </div>
</template>

<script>
    import Vue from 'vue'    
    export default {
      props:['listshopdata'],
      data(){
        return {

        }
      },

    }
</script>

<style lang="less" scoped>

    .thum-style {
        padding-bottom: 8rem;
    }
    .thum-style .list-datail {
        padding: 0;
        margin: 0;
        float: left;
        width: 50%;
        height: 7.5rem;
        position: relative;
        border-bottom: 1px solid #f7f7f7;
        border-right: 1px solid #f7f7f7;
    }
    .thum-style .list-datail .o-index-pro-pic {
        width: 100%;
        height: 4.8rem;
        margin-top: .4rem;
    }
    .thum-style .list-datail .o-index-pro-pic a {
        display: block;
        position: relative;
        width: 100%;
        height: 4.8rem;
        margin: 0 auto;
    }
    .thum-style .list-datail .o-index-pro-pic img {
        display: block;
        width: 4.8rem;
        height: 4.8rem;
        margin: 0 auto;
    }

    .thum-style .list-datail .o-pro-info {
        margin: .2rem .32rem;
        font-size: .52rem;
        color: #444;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    } 
    .thum-style .list-datail .qa-price span.no-line {
        text-decoration: none;
    }
    .thum-style .list-datail .qa-price span.sendFlagStr {
        display:inline-block;
        margin-left: 0.24rem;
        padding: 0 0.24rem;
        font-size: 0.36rem;
        color: #ff782d;
        border: 1px solid #ff782d;
        border-radius: 100px;
        text-align: center;
        line-height: 0.5rem;
    }
    .thum-style .list-datail .qa-price {
        margin: 0rem .32rem;
        line-height: .72rem;
        font-size: .6rem;
        color: #f5a623;
        // text-align: center;
        overflow: visible !important;
        .yen {
            font-size: .44rem;
        }
    }
   
    .thum-style .list-datail.item-noinv .o-index-pro-pic a:before {
        position: absolute;
        content: '';
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        width: 2.72rem;
        height: 2.72rem;
        background: url('/static/images/soldout.png');
        background-size: 100% 100%;
    }
    .thum-style .list-datail .o-index-pro-pic a:after {
        display: block;
        width: 2rem;
        height: 2rem;
        position: absolute;
        right: 0.2rem;
        top: 0.2rem;
    }
    .thum-style .list-datail.djh .o-index-pro-pic a:after {
        content: " ";
        background: url() 0 0 no-repeat;
        background-size: 100%;
    }
    .thum-style .list-datail.icon-qg .o-index-pro-pic a:after {
        content: " ";
        background: url('/static/images/qianggou.png') 0 0 no-repeat;
        background-size: 100%;
    }
    .thum-style .list-datail img.lefttop{
        position: absolute;
        left: -0.8rem;
        top: 0.4rem;
        width: 3.5rem;
    }
    .thum-style .list-datail img.righttop{
        position: absolute;
        right: 0.2rem;
        top: 0.4rem;
        width: 3.5rem;
    }
    .thum-style .list-datail img.leftbottom{
        position: absolute;
        left: -0.8rem;
        bottom: -0.8rem;
        width: 3.5rem;
    }
    .thum-style .list-datail img.rightbottom{
        position: absolute;
        right: 0.2rem;
        bottom: -0.8rem;
        width: 3.5rem;
    }
    .thum-style .list-datail .qa-price span {
        font-weight: normal;
        color: #bbb;
        font-size: .48rem;
        text-decoration: line-through;
    }


 
</style>
